<template>
  <div>
    <h1>菜单管理o(≧v≦)o</h1><hr>
    <div style="padding-right: 1200px;margin-top: 10px">
      <el-button
          size="mini"
          type="primary"
          @click="openAddFatherMenu">添加</el-button>
    </div><br>
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all:false
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="id"
          label="ID"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="url"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="orders"
          label="排序">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleAdd(scope.row.id)">添加</el-button>
          <el-button
            size="mini"
            type="success"
            @click="openUpdateMenu(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!-- 添加菜单   -->
    <div>
      <el-dialog title="添加菜单"  :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="url地址" :label-width="formLabelWidth">
            <el-input v-model="form.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="显示排序" :label-width="formLabelWidth">
            <el-input v-model="form.orders" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdateMenu">确 定</el-button>
        </div>
      </el-dialog>
    </div>
<!--    添加父菜单-->
    <div>
      <el-dialog title="添加父菜单"  :visible.sync="dialogFatherForm">
        <el-form :model="fatherForm">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="fatherForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="显示排序" :label-width="formLabelWidth">
            <el-input v-model="fatherForm.orders" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancal">取消</el-button>
          <el-button @click="addFatherMenu" type="primary">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "CaiDanView",
  data(){
    return{
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},
      dialogFatherForm:false,
      fatherForm:{}
    }
  },methods:{
    openUpdateMenu(row){
      this.dialogFormVisible=true;
      this.form=row
    },
    /*添加父菜单*/
    addFatherMenu(){
      this.axios.post("http://172.20.10.5:8003/api/tb-menu/addFatherMenu",this.fatherForm).then(res=>{
        if(res.data=='success'){
          this.$message.success("添加成功");
          this.dialogFatherForm=false;
          this.caidanList();
        }
      })
    },
    // 打开添加父菜单的嵌套表单
    openAddFatherMenu(){
      this.dialogFatherForm=true
    },
      caidanList(){
        this.axios.post("http://172.20.10.5:8003/api/tb-menu/menuList").then(res=>{
          this.tableData=res.data
        })
      },handleAdd(id){
        this.form={}
        console.log(id);
        this.dialogFormVisible=true;
        this.form.pid=id;
        /*this.axios.post("http://172.20.10.5:8003/api/tb-menu/handleAdd?id="+id).then(res=>{

        })*/
    },saveOrUpdateMenu(){
        //alert(this.form.pid)
        this.axios.post("http://172.20.10.5:8003/api/tb-menu/saveOrUpdateMenu",this.form).then(res=>{
          if(res.data=='success'){
            this.$message.success("操作成功");
            this.dialogFormVisible=false;
            this.caidanList();
          }
        })
    },handleDelete(id){
        console.log("删除的Id:=="+id);
        this.axios.post("http://172.20.10.5:8003/api/tb-menu/handleDelete?id="+id).then(res=>{
          if(res.data=='success'){
            this.$message.success("删除成功！！")
            this.caidanList();
          }
        })
    },/*取消方法*/
    cancal(){
      this.dialogFatherForm=false;
    }
  },created() {
    this.caidanList();
  }
}
</script>

<style scoped>

</style>